<!DOCTYPE html>
<html>
  <head>
    <title>Widget Test</title>
        <script src="/js/jquery.js"></script>
        <script src="/js/jquery-ui.min.js"></script>
        <script>
          $(function(){
              $.widget( "nmk.progressbar", {
                // default options    
                options : { value: 0 },
                _create: function() {
                  this.element.addClass("progressbar");
                  this._update();
                },
                _setOption: function(key, value) {
                  this.options[key] = value;
                  this._update();
                },
                _update: function() {
                  var progress = this.options.value + "%";
                  this.element.text(progress);
                  if (this.options.value == 100) {
                    this._trigger( "complete", null, { value: 100 } );
                  }
                },
                // create a public method
                value: function(value) {
                  // no value passed, act as a getter
                  if (value === undefined) {
                    return this.options.value;
                    // value passed, act as a setter
                  } else {
                    this.options.value = this._constrain(value);
                    this._update();
                  }
                },
                // create a private method
                _constrain: function(value) {
                  if (value > 100) {
                    value = 100;
                  }
                  if (value < 0) {
                    value = 0;
                  }
                  return value;
                }
              });

              //$("<div></div>").appendTo( "body" ).progressbar( { value: 40 } );

              /*var bar = $("<div></div>").appendTo("body").progressbar({ value: 20 });
              // get the current value 
              alert(bar.progressbar("value"));
              // update the value 
              bar.progressbar("value", 100);
              // get the current value again 
              alert(bar.progressbar("value"));*/

              var bar = $("<div></div>").appendTo("body").progressbar({
                complete: function(event, data) {
                  alert( "Callbacks are great!" );
                } 
              }).bind( "progressbarcomplete", function(event, data) {
                alert("Events bubble and support many handlers for extreme flexibility.");
                alert("The progress bar value is " + data.value);
              });
              bar.progressbar( "value", 100);
          });
        </script>
  </head>
  <body>
  </body>
</html>